<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>用户注册</title>
    <meta name="decorator" content="cms_default_zcm"/>
    <script>
        $(function () {
            $("#validateCode").removeAttr("style");
            $("#validateCode").siblings("img").addClass("code");
        });
    </script>
    <script type="text/javascript">
        /**
         *发送短信验证码
         */
        var int = null;
        function SendMessage(){
            if(phoneflag){
                alert("手机号码填写有误，请检查");
                return;
            }
            var n=60;
            int = setInterval(function(){
                n --;
                if(n < 1){
                    $(".dxyzm").show();
                    clearInterval(int);
                    int = null;
                    return;
                }
                $(".dxyzm").hide();
            },1000);
            $.ajax({
                url : "${ctx}/smgRandom",
                // 设置请求方法
                data:{"mobile":$('#mobile').val()},
                type : 'POST',
                dataType : 'JSON',
                // 成功回调
                success : function(result) {
                    alert(result.message + " 60s后可重新获取" );
                },
                // 失败回调
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        }

        $(document).ready(function() {
            $("#validateCode").on("blur",validateValidCode);
            $("#smgcode").on("blur",validateSmgCode);
            $("#liSmgcode").hide();
        });


        var nameflag = true;
        var psdflag = true;
        var phoneflag = true;
        var validCodeFlag = true;
        var smgcodeFlag = true;

        /**
         *校验账号是否存在
         */
        function validateValidCode() {
            var validateCode = $('#validateCode').val();
            if (!validateCode) {
                $("#validateCodeMsg").html("<font color='#ff0000'>请填写验证码</font>");
                validCodeFlag = true;
                $("#liSmgcode").hide();
                return;
            }
            //发生Ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/servlet/validateCodeServlet",
                // 设置请求方法
                data: {"validateCode": validateCode},
                type: 'GET',
                dataType: 'JSON',
                // 成功回调
                success: function (result) {
                    if (result) {
                        $('#validateCodeMsg').html("<img src='${ctx}/static/images/agree_ok.gif' />");
                        validCodeFlag = false;
                        $("#liSmgcode").show();
                        return;
                    }
                    $("#liSmgcode").hide();
                    validCodeFlag = true;
                    $('#validateCodeMsg').html('<font color="#ff0000">验证码不正确</font>');
                },
                // 失败回调
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    validCodeFlag = true;
                    $("#liSmgcode").hide();
                }
            });
        }

        /**
         *校验账号是否存在
         */
        function validateSmgCode() {
            var smgcode = $('#smgcode').val();
            if (!smgcode) {
                $("#smgcodeMsg").html("<font color='#ff0000'>请填写验证码</font>");
                smgcodeFlag = true;
                return;
            }
            smgcodeFlag = false;
            $("#smgcodeMsg").html("");
        }

        function register() {
            if (nameflag || psdflag || phoneflag||validCodeFlag||smgcodeFlag) {
                alert("注册资料有误");
                return;
            }
            $.post("${ctx}/register",
                {
                    loginName: $('#loginName').val(),
                    password: $('#password').val(),
                    mobile: $('#mobile').val(),
                    smgcode: $('#smgcode').val(),
                },
                function (map) {
                    if (map.success) {
                        alert(map.message);
                        window.location.href = "${ctx}/register"
                    } else {
                        alert(map.message);
                    }
                });
        }

        /**
         *校验账号是否存在
         */
        function validateLoginName() {
            var loginName = $('#loginName').val();
            var pattern = /^[A-Za-z0-9]{4,16}$/;
            if (!loginName) {
                $("#loginName-text").html("<font color='#ff0000'>用户名不能为空</font>");
                nameflag = true;
                return;
            }
            if (!pattern.exec(loginName)) {
                $("#loginName-text").html(
                    "<font color='#ff0000'>用户账户为4-16位数字或英文字母组合成的字符串  </font>");
                nameflag = true;
                return;
            }

            //发生Ajax请求
            $.ajax({
                url: "${ctx}/validateLoginName",
                // 设置请求方法
                data: {"loginName": loginName},
                type: 'POST',
                dataType: 'JSON',
                // 成功回调
                success: function (result) {
                    if (result.success) {
                        $('#loginName-text').html("<img src='${ctx}/static/images/agree_ok.gif' />");
                        nameflag = false;
                        return;
                    }
                    nameflag = true;
                    $('#loginName-text').html('<font color=\'#ff0000\'>用户名已存在</font>');
                },
                // 失败回调
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        }

        /**
         *校验密码
         */
        function validatePassword() {
            var password = $('#password').val();
            var psd = $('#psd').val();
            var pattern = /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{4,16}$/
            if (!pattern.exec(password)) {
                $("#psdmsg").html(
                    "<font color='#ff0000'>密码必须为4-16位数字或英文字母的组合</font>");
                psdflag = true;
                return;
            } else {
                $("#psdmsg").html("");
                psdflag = false;
            }
            if (psd != password) {
                $("#passwordmsg").html("<font color='#ff0000'>两次密码输入不相同</font>");
                psdflag = true;
                return;
            } else {
                $("#passwordmsg").html("<img src='${ctx}/static/images/agree_ok.gif' />");
                psdflag = false;
            }

        }

        /**
         *校验手机号
         */
        function validateMobile() {
            var mobile = $('#mobile').val();
            var pattern = /^(0|86|17951)?(1[345789])[0-9]{9}$/
            if (mobile == null || mobile == "") {
                $("#mobilemsg").html("<font color='#ff0000'>手机号不能为空</font>");
                phoneflag = true;
                return;
            }
            if (!pattern.exec(mobile)) {
                $("#mobilemsg").html("<font color='#ff0000'>手机号输入错误</font>");
                phoneflag = true;
                return;
            }
            $.ajax({
                url: "${ctx}/validateMobile",
                // 设置请求方法
                data: {"mobile": mobile},
                type: 'POST',
                dataType: 'JSON',
                // 成功回调
                success: function (result) {
                    if (result.success) {
                        $('#mobilemsg').html("<img src='${ctx}/static/images/agree_ok.gif' />");
                        phoneflag = false;
                        return;
                    }
                    phoneflag = true;
                    $('#mobilemsg').html("<font color='#ff0000'>该手机号已存在</font>");
                },
                // 失败回调
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        }
    </script>
</head>
<body>

<section class="g-bannerTop" style="background-image: url(${ctxStatic}/zcm/images/banner81.png);"></section>
<section class="content section81">
    <div class="title">欢迎注册多多看盘</div>
        <form:form method="POST" action="" id="registerform"><ul class="form">
            <li><span class="tt"><i class="red">*</i>输入用户名：</span>
                <input name="loginName" type="text" id="loginName"  onblur="validateLoginName()" placeholder="建议为4-16位数字或英文字母组合">
                <font class="msg" color="gray"  id="loginName-text">为4-16位数字或英文字母组合成的字符串</font>
            </li>
            <li><span class="tt"><i class="red">*</i>请设置密码：</span>
                <input onblur="validatePassword()" name="password" id="password" type="password" placeholder="密码须为4-16位数字或英文字母的组合">
                <font class="msg" style="font-size: 12px;" color="gray" id="psdmsg">密码须为4-16位数字或英文字母的组合</font>
            </li>
            <li><span class="tt"><i class="red">*</i>请确认密码：</span>
                <input name="psd" id="psd" type="password" onblur="validatePassword()" placeholder="请再次输入密码">
                <font class="msg" style="font-size: 12px;" color="gray" id="passwordmsg"></font>
            </li>
            <li><span class="tt"><i class="red">*</i>输入手机号：</span>
                <input name="mobile" type="text" id="mobile" onkeyup="this.value=this.value.replace(/\D/g,'')" onblur="validateMobile()" placeholder="请输入手机号">
                <font class="msg" style="font-size: 12px;" color="gray" id="mobilemsg">请输入正确的手机号码</font>
            </li>
            <li class="yzm"><span class="tt"><i class="red">*</i>输入验证码：</span>
                <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
                <font class="msg" style="font-size: 12px;margin-left: 2em;" color="gray" id="validateCodeMsg"></font>
            </li>
            <li class="yzm"><span class="tt"><i class="red">*</i>请输入短信验证码：</span>
                <input type="text"  name="smgcode" id="smgcode" type="text" placeholder=""><a href="javascript:" onclick="SendMessage()" class="btn-yzm dxyzm">获取短信验证码</a>
                <font class="msg" style="font-size: 12px;margin-left: 2em;" color="gray" id="smgcodeMsg"></font>
            </li>
        <li class="operate">
            <input type="button" onclick="register()" value="注册" class="btn">
        </li>
        </ul></form:form>
</section>

</body>
</html>

